<!DOCTYPE html> 
<html> 
    <head> 
        <title>Registration</title> 
		<style>
			body 
			{
				background-color: #D1CDFA;
				font-family: Tahoma;
			}
			#wrapper 
			{
				width: 100%;
				margin-top: 30px;
			}
			#container 
			{
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				background-color: #A60000;;
				-moz-border-radius: 7px;
				-webkit-border-radius: 7px;
				border-radius: 7px;
				-moz-box-shadow: 0px 0px 16px #282727;
				-webkit-box-shadow: 0px 0px 16px #282727;
				box-shadow: 0px 0px 16px #282727;
				padding-top: 10px;
				height: 600px;
			}
			#content 
			{
				width: 30%;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				border: 2px dashed #dedede;
				padding-top: 20px;
				padding-bottom: 20px;
			}
			.leftcol
			{
				text-align: center;
				color: white;
				padding-bottom: 20px;
				font-size: 1em;
			}
			.rightcol
			{
				text-align: center;
				padding-bottom: 20px;
			}
			h1
			{	position: relative;
				text-align: center;
				color: white;
				font-size: 36px;
			}
			#submit 
			{
				color: rgb(0, 0, 0);
				font-size: 1em;
				padding: 10px;
				text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
				-webkit-border-radius: 3.6818181818181817px;
				-moz-border-radius: 3.6818181818181817px;
				border-radius: 3.6818181818181817px;
				background: #D1CDFA;
				-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
				-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.75);
				box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.75);
				border: 0.1em solid #dedede;
				margin-bottom: 50px;
				margin-left: 565px;
				height: 40px;
			}
			#submit:hover
			{
				border: 0.123em dashed #dedede;
			}
			input 
			{
				border: none;
				height: 20px;
				border: 1px solid #dedede;
			}

			input:focus
			{
				background-color: #D1CDFA;
				outline: 0;
				border: 1px solid #dedede;
			}
		</style>
    </head> 
    <body>  
    	<div id="wrapper">
    	<div id="container">
    		<h1 id="heading">Sign Up</h1>
        	<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> 
        		<table  id="content"> 
            		<tr>
            			<td class="leftcol"><label for="username">Username:</label></td>
            			<td class="rightcol"><input type="text" id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Enter at least 5 characters. Only letters and numbers are allowed." 
            			    required /></td>
            		</tr>
            		<tr>
            			<td class="leftcol"><label for="password">Password:</label></td>
            			<td class="rightcol"><input type="password" id="password" name="password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
            				title="At least 8 characters required, including a number/special character and an uppercase character. " 
            				required /></td>
            		</tr>
            		<tr>
            			<td class="leftcol"><label for="password2">Repeat Password:</label></td>
            			<td class="rightcol"><input type="password" id="password2" name="password2" required /></td>
            		</tr>
            		<tr>
            			<td class="leftcol"><label for="email">Email:</label></td>
            			<td class="rightcol"><input type="email" id="email" name="email"
            				pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required /></td>
            		</tr>
            		<tr>
            			<td class="leftcol"><label for="fname">First Name:</label></td>
            			<td class="rightcol"><input type="text" id="fname" name="fname" required /></td>
            		</tr>
            		<tr>
            			<td class="leftcol"><label for="lname">Last Name:</label></td>
            			<td class="rightcol"><input type="text" id="lname" name="lname" required /></td>
            		</tr>
            		<tr>
            			<td class="leftcol"><label for="bday">Birth Date:</label></td>
            			<td class="rightcol"><input type="date" id="bday" name="bday" required /></td>
            		</tr>
            		<tr><td colspan="2" id="passValid" style="color: #FF4545;"></td></tr>
        		</table> 
       	 		<br /> 
            	<input type="submit" value="Submit" name="submit" id="submit" /> 
       	    </form>    
        </div>
        </div>       
        <?php  
        	if(isset($_POST['submit'] )) { 
  		    	require_once ("dbconnection.php");
  		    	$username = $_POST["username"];
  		    	$password = $_POST["password"];
  		    	$password2 = $_POST["password2"];
  		    	$email = $_POST["email"];
  		    	$fname = $_POST["fname"];
  		    	$lname = $_POST["lname"];
  		    	$bday = $_POST["bday"];
  		    
  		    	
  		    	if(!strcmp($password, $password2))
  		    	{
  		    		createUser($username, $password, $email, $bday, $fname, $lname);
  		    		echo '<script>document.getElementById("container").innerHTML = "<h1>Successful registration!</h1>";</script>';
  		    	}
  		    	else
  		    	{
					echo '<script>document.getElementById("passValid").innerHTML = "Passwords do not match!";</script>'; 
  		   		}
			} 
      ?>   
    </body> 
</html>